<template>
	<view>
		<van-popup
			round
			:show="showPopup"
		>
			<view class="main">
				<view class="ctr top">
					小程序需要授权手机号
				</view>
				<view class="btns">
					<view class="ctr" @click="hide">取消</view>
					<button
						class="ctr"
						open-type="getPhoneNumber|agreePrivacyAuthorization"
						@getphonenumber="getPhoneNumber"
					>确认</button>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import { updatePhoneNumber } from "@/utils";
	import { getUser } from "@/api/user";
	export default {
		data(){
			return {
				showPopup:false
			}
		},
		methods:{
			hide(){
				this.showPopup = false;
			},
			show(){
				this.showPopup = true;
			},
			getPhoneNumber(e){
				if(e.detail.errMsg == "getPhoneNumber:fail user deny"){
					console.log("用户拒绝授权手机号")
				}else{
					const {
						iv,code,encryptedData
					} = e.detail;
					updatePhoneNumber({
						encryptedData,
						iv
					}).then(() => {
						
						getUser().then((res) => {
							console.log("getUser获取成功");
							this.$store.commit("UPDATE_USERINFO", res.data);
							this.$emit("getPhone");
							this.hide();
						}).catch(()=>{
							console.log("getUser获取失败");
						})
					}).catch(err=>{
						// uni.removeStorageSync("hasUserInfo",true);
						uni.showToast({
							title:err || err.msg || err.message || "更新手机号信息失败",
							icon:"none"
						});
						this.hide();
					})
					
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.main{
		width:600rpx;
		height:400rpx;
		background-color:#fff;
		display:flex;
		flex-direction:column;
		.top{
			height:300rpx;
			width:100%;
		}
		.btns{
			width:100%;
			height:100rpx;
			display:flex;
			view{
				width:50%;
				height:100%;
				border-top:1rpx solid #c5c5c5;
				border-right:1rpx solid #c5c5c5;
			}
			button{
				padding:0;
				margin:0;
				width:50%;
				height:100%;
				border-top:1rpx solid #c5c5c5;
				border-radius:0;
			}
		}
	}
</style>